<template>
    <div class="test3">
        <h2>当前求和{{ sum }}</h2>
        <button @click="add">点击</button>
        <hr>
        <img v-for="(dog,index) in dogList" :src="dog" :key="index">
        <button @click="getDog">再次获取图片</button>
    </div>
</template>

<script lang="ts" setup name="testComponent2">
    import { ref, onMounted, watch, reactive, watchEffect } from 'vue';
    import {type PersonInter} from '@/types'
    import axios from 'axios';
    import useDog from '@/hooks/useDog';
    import useSum from '@/hooks/useSum';

    let person: PersonInter = reactive({
        id: 64686,
        age: 18,
        name: 'John Doe'
    })
    let person2 = reactive<PersonInter>({
        id: 64686,
        age: 18,
        name: 'John Doe'
    })

    const {dogList, getDog} = useDog()
    const {sum, add} = useSum()

</script>

<style scoped>
.test3 {
    background-color: #f9f9f9; /* 背景颜色 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 8px; /* 圆角 */
    padding: 16px; /* 内边距 */
    text-align: center; /* 文本居中 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

h2 {
    color: #333; /* 字体颜色 */
    font-size: 1.5rem; /* 字体大小 */
    margin: 0; /* 去掉默认外边距 */
}

image {
    width: 100px;
    margin-right: 10px;
}
</style>